Coffee School

Code Editor

// Creating environment variables var playerSize = 10; var sceneWidth = 300, sceneHeight = 150; var groundHeight = 10; var playAreaHeight = (sceneHeight - groundHeight); // Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Object width! var objectWidth = 2 * playerSize; // Obstacle Counter var obstacleCounter = 0; // Sets the background colour Crafty.background("#ADD8E6"); Crafty.defineScene("Start", function() { // Start screen stuff here }); // Enter the start scene Crafty.enterScene("Start"); Crafty.defineScene("Game", function() { // Create the ground! Crafty.e("Solid, 2D, DOM, Color") .attr({x: 0, y: playAreaHeight, w: sceneWidth, h: groundHeight}) .color("#00ff00"); // Create our player's base entity Crafty.e("Collision, 2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from .checkHits("Solid") .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity if(this.y < 0) { playerVel = g; // Prevent the player from going above the game screen } else { playerVel += g; // Adds the "gravitational acceleration" to the player's velocity } this.y += playerVel; // Change the player entities y position based on the player velocity }) .bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap" playerVel = -5; // Sets the player's speed and direction to go upwards } }) .bind("HitOn", function() { Crafty.pause(); }) .bind("EnterFrame", function() { Crafty("Obstacle").each(function() { if(this.x < -objectWidth) { this.destroy(); } else { this.x -= 3; } }); if(obstacleCounter > 100){ obstacleCounter = 0; newObstacle(); } obstacleCounter++; }); }); function newObstacle() { var randomHeight = Math.floor((Math.random() * (sceneHeight/2)) + (sceneHeight/3)); var bottomOfTopHalf = playAreaHeight - randomHeight; var topOfBottomHalf = bottomOfTopHalf + (4 * playerSize); // Create the top half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: 0, w: objectWidth, h: bottomOfTopHalf}) .color("#003319"); // Create the bottom half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: topOfBottomHalf, w: objectWidth, h: playAreaHeight - topOfBottomHalf}) .color("#003319"); }

Preview

Console Log:

title: Game Lesson Three - Using Game States

Goal: Adding graphics to the start screen and launching the main game

Now that there is a “Start” scene we can fill it with graphics and make the player able to launch into the game from it. You can have a bit of a mess about with the graphics here as they aren’t too important for the game’s functionality.

Usually this style of game has the player’s avatar flying in the air until they start the game, so that’s what I’m going to show you! To make it look like we’re in the game scene but haven’t started playing yet we just need to place the player’s avatar and the ground in it.

However for the start screen no fancy behaviour needs to be added, so we can just make entities inside our defineScene function:

Crafty.defineScene("Start", function() {

    // "Dummy" player
    Crafty.e("2D, DOM, Color")
        .attr({x: 30,y: 30, w: playerSize, h: playerSize})
        .color("#ff0000");

    // Dummy ground
    Crafty.e("2D, DOM, Color")
        .attr({x: 0, y: playAreaHeight, w: sceneWidth, h: groundHeight})
        .color("#00ff00");
});

Now that the visuals are mocked up we can add in an entity which uses the Text component to display a message about how to start. If we want to start the game when the player hits the spacebar then we can bind a KeyDown event to the mockup of the player and have the message tell the player how to start.

To put our text message in the middle of the screen we can add in this entity in the scene code block:

Crafty.e("2D, DOM, Text")
    .attr({x: sceneWidth/2, y: sceneHeight/2, w: 100, h: 20})
    .text("Press 'space' to begin")
    .css({"text-align":"center"});

To then load the “Game” scene when the player hits the spacebar we just bind the KeyDown event to the “dummy” player in the “Start” scene like we did for the player jump in the real game.

The only difference is that instead of jumping we use:

Crafty.enterScene("Game");

If you try this out you should now have a welcoming start screen for your game!